<template>
  <div class="common-layout">
    <div>
      <img :src="coffee.image" class="image-wrap" alt="" />
    </div>
    <div class="info-wrap">
      <h1>价格: {{ coffee.price }}</h1>
      <p>名字: {{ coffee.chineseName }}</p>
      <p>描述: {{ coffee.chineseDescription }}</p>
      <p>大小: {{ coffee.sizes }}</p>
      <p>奶搭配: {{ coffee.milkTypes }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coffee: {}, // 初始化为空对象
    };
  },
  mounted() {
    this.fetchCoffeeDetail(); // 确保这个方法在组件挂载后被调用
  },
  methods: {
    fetchCoffeeDetail() {
      const id = this.$route.params.id; // 获取动态路由参数
      console.log(id);
      this.$axios
        .get("/coffees/coffees/?id=4")
        .then((response) => {
          this.coffee = response.data[0].details.find(
            (c) => c.id === parseInt(id)
          );
          console.log(this.coffee);
        })
        .catch((error) => {
          console.error("Error fetching coffee details:", error); // 捕获并处理错误
        });
    },
  },
};
</script>
<style scoped>
.common-layout {
  display: flex; /* 使用Flexbox布局 */
  flex-direction: row; /* 确保子元素水平排列 */
  align-items: flex-start; /* 从顶部开始对齐 */
  background-color: #f2f2f2; /* 背景颜色 */
  max-width: 1500px; /* 设置最大宽度 */
  margin: 0 auto; /* 使 .common-layout 居中 */
  padding: 20px; /* 添加内边距 */
}

.image-wrap {
  flex: 1; /* 让图片占据剩余空间 */
  margin-right: 40px; /* 增加图片与右侧内容之间的间距 */
  border-radius: 10px; /* 圆角 */
  width: 550px;
  height: auto;
}

/* 添加一个类来包裹信息部分 */
.info-wrap {
  flex: 1; /* 让信息部分占据剩余空间 */
}

.info-wrap h1,
.info-wrap p {
  margin: 10px 0; /* 添加外边距 */
  font-family: Arial, sans-serif; /* 字体 */
}

.info-wrap h1 {
  font-size: 24px; /* 增加标题字体大小 */
  color: #333; /* 深灰色文本颜色 */
}

.info-wrap p {
  font-size: 16px; /* 增加段落字体大小 */
  color: #666; /* 稍微深一点的灰色文本颜色 */
}

.details {
  display: flex; /* 使用Flexbox布局 */
  flex-direction: column; /* 确保子元素垂直排列 */
}

.details > div {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 10px; /* 增加间距 */
}

.details > div label {
  min-width: 80px; /* 设置标签的最小宽度 */
  text-align: left; /* 左对齐 */
}
</style>